<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Canvas</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.canvas.js"></script>
	<script type="text/javascript">
	<!--//
	$(function(){
		$("canvas").canvas({
			width: 500,
			height: 250,
			pixel: true
		});

		var layer = $.canvasLayer($("canvas"), {
			x: 0,
			y: 0
		});
		$.canvasRect(layer, {
			stroke: "#000",
			fill: "#ffff00",
			x: 50,
			y: 50,
			width: 200,
			height: 100
		});

		var layer2 = $.canvasLayer(layer, {
			x: 50,
			y: 50,
			width: 200,
			height: 100,
			clip: true
		});
		$.canvasText(layer2, {
			value: 'jQuanvas',
			x: 5,
			y: 5,
			basline: 'bottom',
			font: 'bold 72px Helvetica, Arial, Verdana, sans-serif'
		});
		

		//alert(layer2.get('y'));
		setTimeout(function() {
			layer.set('y', layer.get('y')+10);
			$.canvasDraw();
		}, 500);
	});
	//-->
	</script>
	<style type="text/css">
		body
		{
			background: silver;
			text-align:	center;
		}

		canvas
		{
			border:		2px solid brown;
			/*cursor:		none;*/
		}
		pre
		{
			text-align:	left;
		}
	</style>
</head>

<body>
	<canvas id="canvas" width="200" height="250" class="foo bar"></canvas>
	<pre id="debug"></pre>
</body>
</html>
